<template>
	<view>
		<!-- 购物车为空 -->
		<view v-if="carList.length < 1" style="margin-top:100px;">
			<gui-empty>
				<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
					<!-- 请根据您的项目要求制作并更换为空图片 -->
					<image style="width: 450rpx;" src="../../static/emptys.png" mode=""></image>
				</view>
				<text slot="text" class="gui-text-small gui-block-text gui-text-center"
					style="color:#9DABFF;">您的购物车空空如也</text>
			</gui-empty>
		</view>
		<!-- 购物车主结构  -->
		<view class="gui-common-line" v-if="carList.length != 0"></view>
		<view v-for="(item, index) in carList" :key="index">
			<view class="gui-shoppingcard gui-bg-white">
				<view style="height:25rpx;"></view>
				<view class="gui-shoppingcard-goods gui-flex gui-rows gui-nowrap gui-space-between">
					<view class="gui-shoppingcard-goods-checkbtn">
						<gui-radio :checked="item.checked" @change="itemChange" checkedColor="#8c540f"
							:parameter="[index]"></gui-radio>
					</view>
					<image :src="tool.img(item.zgui.image)" mode="aspectFill" class="gui-shoppingcard-goods-image"
						style="border-radius: 8rpx;"></image>
					<view class="gui-shoppingcard-goods-body">
						<text style="font-size: 28rpx;color: #3c3c3c"
							class="one gui-shoppingcard-goods-title gui-primary-color gui-block-text">{{item.zgui.zlist.name}}</text>
						<text style="font-size: 24rpx;color: #999;">{{ item.zgui.name }} | {{item.banji}}</text>
						<view class="gui-flex gui-rows gui-space-between gui-align-items-center">
							<text class="gui-shoppingcard-goods-price gui-block-text"
								style="font-size: 28rpx;">￥{{item.zgui.price}}</text>
							<view class="gui-shoppingcard-goods-number">
								<gui-step-box :disabled="true" :index="indexItem" :datas="[index,item]"
									:value="item.num" :maxNum="100" :minNum="1" @change="numberChange"></gui-step-box>
							</view>
						</view>
						<text class="gui-shoppingcard-remove gui-block-text gui-icons gui-color-gray"
							@tap="removeGoods(index,item)" :id="'removeIndex_' + index + '_' + indexItem">&#xe62a;删除
						</text>
					</view>
				</view>
			</view>
			<view class="gui-common-line"></view>
		</view>
		<!-- 购物车底部 -->
		<view style="height:120rpx;"></view>
		<view class="gui-shoppingcard-footer gui-bg-white  gui-border-box gui-border-t">
			<view class="gui-flex gui-rows gui-space-between gui-align-items-center">
				<view class="gui-shoppingcard-checkbtn gui-flex grace-nowrap">
					<gui-radio :checked="false" checkedColor="#fc6564" @change="itemChangeAll">
						<text class="gui-text gui-primary-color">{{selectText}}</text>
					</gui-radio>
				</view>
				<view
					class="gui-shoppingcard-count gui-flex gui-rows gui-nowrap gui-align-items-center gui-justify-content-end"
					style="padding-right: 20rpx;">
					<text class="gui-text gui-primary-color">合计 :</text>
					<text style="font-size:32rpx;#fc6564;">￥{{totalprice}}</text>
				</view>
				<text style="background-color: #fc6564;"
					class="gui-shoppingcard-checkout gui-block-text gui-color-white" @tap="checkout">立即结算</text>
			</view>
		</view>
	</view>
</template>
<script>
	import tool from '../../utils/tool.js'
	export default {
		data() {
			return {
				tool: tool,
				carList: [], //购物车列表
				totalprice: '', // 总价
				selectText: '全选', // 选择文本
			}
		},
		onShow() {
			this.GetcarList()
		},
		methods: {
			countTotoal: function() { //计算总计函数
				var total = 0;
				for (let i = 0; i < this.carList.length; i++) {
					if (this.carList[i].checked) {
						total += Number(this.carList[i].zgui.price) * Number(this.carList[i].num);
					}
				}
				this.totalprice = total.toFixed(2);
			},
			GetcarList() { //获取购物车列表
				this.$http.Post('uter/gouList', {}, (result) => {
					this.carList = result.data
					this.carList.filter((item, i) => {
						item.checked = false
					})
					this.countTotoal()
				})
			},
			Getnum(id, num) { //加减数量API
				this.$http.Post('uter/gouNumAdd', {
					gou_id: id,
					num: num
				}, (result) => {

				})
			},
			numberChange: function(data) { //加减数量
				let num = data[0] //数量
				let item = data[2][1] //数据
				let index = data[2][0] //下标
				this.Getnum(item.id, num)
				this.carList[index].num = num
				this.countTotoal();
			},
			delshop(id) { //删除商品API
				this.$http.Post('uter/gouDel', {
					gou_id: id
				}, (result) => {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})
					this.GetcarList()
				})
			},
			removeGoods: function(index, item) { //删除商品
				uni.showModal({
					title: '确认提醒',
					content: '您确定要移除此商品吗？',
					success: (e) => {
						if (e.confirm) {
							this.delshop(item.id)
						}
					}
				})
			},
			checkout: function() { //立即结算
				let arr = []
				this.carList.filter((item, i) => {
					if (item.checked) {
						arr.push(item.id)
					}
				})
				if (arr.length == 0) {
					uni.showToast({
						title: '请选择下单商品',
						icon: 'none'
					})
					return
				}
				this.$http.Post('order/gouwuPay', {
					gou_idArr: arr
				}, (result) => {
					uni.navigateTo({
						url: '/pages/buy/index?id=' + result.data.id
					})
				})

			},
			itemChange: function(e) { // 商品选中
				var indexs = e[1].toString(); //下标
				this.carList[indexs].checked = e[0]
			},
			itemChangeAll: function(e) {
				this.selectText = e[0] ? '全选' : '全不选';
				this.carList.filter(item => {
					item.checked = e[0]
				})
				this.countTotoal();
			}
		}
	}
</script>
<style>
	.gui-shoppingcard {
		border-radius: 8rpx;
		padding: 20rpx 30rpx;
	}

	.gui-shopp-name {
		width: 200rpx;
		flex: 1;
	}

	.gui-shopp-go {
		width: 120rpx;
		text-align: right;
	}

	.gui-shoppingcard-goods {
		margin: 10rpx 0;
	}

	.gui-shoppingcard-goods-checkbtn {
		width: 60rpx;
	}

	.gui-shoppingcard-goods-image {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}

	.gui-shoppingcard-goods-body {
		width: 400rpx;
		flex: 1;
		overflow: hidden;
	}

	.gui-shoppingcard-goods-title {
		/* line-height: 50rpx; */
	}

	.gui-shoppingcard-goods-price {
		color: #fc6564;
		font-size: 32rpx;
	}

	.gui-shoppingcard-goods-number {
		padding: 2px 0;
	}

	.gui-shoppingcard-remove {
		text-align: right;
		/* line-height: 50rpx; */
		margin-top: 20rpx;
		font-size: 24rpx;
	}

	.gui-shoppingcard-footer {
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 0;
		width: 750rpx;
		padding-left: 30rpx;
	}

	.gui-shoppingcard-checkbtn {
		width: 200rpx;
	}

	.gui-shoppingcard-count {
		width: 200rpx;
		flex: 1;
	}

	.gui-shoppingcard-checkout {
		width: 260rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.one {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 如果购物车放在 switch 页面并且是 h5 端请打开注释启用下面的样式 */
	/* #ifdef H5 */
	/* .gui-shoppingcard-footer{bottom:50px;} */
	/* #endif */
</style>